Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Week2] (#3) 2주차 과제 #4

Open
wants to merge 28 commits into
base: main
Choose a base branch
from
Open

[Week2] (#3) 2주차 과제 #4

wants to merge 28 commits into from

Conversation

mnbvcxzyj
Copy link
Collaborator

@mnbvcxzyj mnbvcxzyj commented Oct 25, 2024

⚠️ 관련 이슈

🚧 작업 내용

  • UIScrollView를 이용하여 앱스토어의 토스 상세 페이지 UI를 구현했습니다.
  • “버전 기록 보기” 및 “모두 보기” 버튼을 눌렀을 때 각각 버전 기록 페이지와 리뷰 모두 보기 페이지로 이동하도록 구현했습니다.
  • “더 보기” 버튼 클릭 시 전체 앱 설명을 표시하는 기능을 구현했습니다.

1) StackView Extension 추가

  • UIStackView에 여러 개의 뷰를 한 번에 addArrangedSubviews로 추가할 수 있도록 확장 메서드 추가하였습니다.
extension UIStackView {
    func addArrangedSubviews(_ views: UIView...) {
        views.forEach {
            self.addArrangedSubview($0)
            $0.translatesAutoresizingMaskIntoConstraints = false
        }
    }
}

2) delegate 패턴 구현

  • RatingAndReviewViewDelegate, NewNewsViewDelegate 프로토콜을 정의하고, 각 뷰에서 버튼 클릭 시 페이지 이동을 위한 델리게이트 메소드를 작성하였습니다.
protocol RatingAndReviewViewDelegate: AnyObject {
    func seeAllReviewsButtonTapped()
}

protocol NewNewsViewDelegate: AnyObject {
    func versionUpdateRecordButtonTapped()
}
  • Delegate 프로토콜을 채택하고 메소드 구현하였습니다.
    func versionUpdateRecordButtonTapped() {
        let versionRecordViewController = VersionRecordViewController()
        navigationController?.pushViewController(versionRecordViewController, animated: true)
    }

    func seeAllReviewsButtonTapped() {
        let allReviewsViewController = AllReviewsViewController()
        navigationController?.pushViewController(allReviewsViewController, animated: true)
    }

    // Delegate 설정
    private func setDelegates() {
        ratingAndReviewView.delegate = self
        newNewsView.delegate = self
    }

3) UIButton Configuration으로 버튼 구현

  • UIButton.Configuration을 사용하여 버튼의 아이콘과 텍스트 사이 간격 조정 등 버튼 스타일을 작성하였습니다.
private let reviewWriteButton: UIButton = {
    let button = UIButton()
    var config = UIButton.Configuration.plain()
    config.image = UIImage(systemName: "square.and.pencil")
    config.title = "리뷰 작성"
    config.baseForegroundColor = .systemBlue
    config.imagePadding = 5
    button.configuration = config
    button.titleLabel?.font = .systemFont(ofSize: 16, weight: .bold)
    
    return button
}()

🙏🏻 To Reviewer

🤔 stackView

image

여기 부분을 구현할 때,

  1. 전체를 infoStackView 로 생각하고
  2. 그 안에 rateStackView, awardStackView, ageStackView와 얇은 구분선들을 추가해서
  3. 각 스택뷰가 동등한 너비로 쫘르륵 나열되는 꿈을 꾸면서..

.fillEqually 값을 주었는데 구분선까지 함께 넓어지면서 제가 생각하는대로 구현되지 않았습니다 .. ^_^ .. ;;
image

그래서 .fillProportionally$0.width.equalTo(infoStackView.snp.width).multipliedBy(1.0 / 3.0) 를 작성하여 각 하위 stackView에 3등분으로 너비 값을 지정해주면 그나마 제가 원하는 느낌으로 뷰가 배치되었는데 더 좋은 방법이 있는지 궁금합니다.

// AppInfoSummaryView 파일 

private let infoStackView: UIStackView = {
        let stackView = UIStackView()
        stackView.axis = .horizontal
        stackView.distribution = .fillProportionally 
//     stackView.distribution = .fillEqually (????) 

이외에도 많은 피드백 부탁드립니다.. 감사합니다 ^ __ ^ ..

📸 시연 영상

Simulator Screen Recording - iPhone 16 - 2024-10-25 at 23 15 10

mnbvcxzyj and others added 28 commits October 10, 2024 15:31
@mnbvcxzyj mnbvcxzyj deleted the branch main October 27, 2024 14:17
@mnbvcxzyj mnbvcxzyj closed this Oct 27, 2024
@mnbvcxzyj mnbvcxzyj reopened this Oct 27, 2024
@mnbvcxzyj mnbvcxzyj changed the base branch from develop to main October 27, 2024 14:19
Copy link

@sozohoy sozohoy left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

고생하셨습니다!!!! 빡!!

import UIKit
import SnapKit

class AppStoreTossMainViewController: UIViewController, RatingAndReviewViewDelegate, NewNewsViewDelegate {
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  • 델리게이트를 익스텐션으로 빼도 좋을 것 같습니다~

Comment on lines +33 to +38
private let separateLine2: UIView = {
let view = UIView()
view.backgroundColor = .lightGray

return view
}()
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  • 따로 컴포넌트 선언하지 않고 메소드를 만들어서 divider들을 추가해줄 수도 있을 것 같아요

Comment on lines +125 to +268
· 걸음 수를 채우고 건강과 혜택을 한 번에, 만보기도 한번 사용해보세요.


● 쓸수록 커지는 혜택, 토스신용카드

· 실적에 따라 더 큰 금액을 돌려드려요.

· 결제 및 캐시백 내역을 토스 앱에서 확인할 수 있어요.

· VISA 플래티늄 서비스 혜택 또한 누려보세요.


● 투자를 모두에게, 토스증권

· 투자의 시작은 관심에서부터, 투자 판단에 도움을 주는 뉴스와 컨텐츠를 확인해보세요.

· 송금처럼 쉬운 구매 경험, 이해하기 쉬운 용어로 나만의 주식 투자를 시작할 수 있어요.


● 완전히 새로운 은행, 토스뱅크

· 채우고, 비우고, 자유롭게, 조건 없는 강력한 통장을 만나보세요.

· 단 한 번의 조회로 가능, 어렵고 복잡한 과정 없는 대출이 기다리고 있어요.

· 다채로운 컬러 그리고 아낌없이 주는 혜택, 토스뱅크 체크카드도 발급받아보세요.


● 가장 가까운 주민센터, 토스 주민센터

· 정부24와 주민센터에서 발급 받았던 민원 증명서, 토스에서 빠르게 받고 낼 수 있어요.

· 건강검진 일정 및 국가장학금 신청 안내, 교통범칙금·과태료 알림도 바로 받고 납부할 수 있어요.


● 사업을 하는 사장님도 편리하게, 내 매출 장부

· 언제 얼마가 입금될까? 매일 알려드리고 매출, 입금 장부를 자동으로 써드려요.

· 사장님 대상 지원 정책도 토스가 챙겨드릴게요.


● 안심하고 쓰세요

· 대한민국 국민 3명 중 1명 사용, 누적 송금액 177조 원, 누적 다운로드 6,900만, 보안사고 0건 (2021년 8월 기준)

· '2018 정보보호대상' 대상 수상 (과학기술정보통신부 주최)

· 해킹 방어수준 25개 금융 앱 중 종합 1위 기록 (2017년 스틸리언 분석)

· 카드사 수준 글로벌 데이터 보안 표준 'PCI-DSS' 업계 최초로 획득

· 국제표준 정보보호 인증 ISO/IEC 27001 및 ISO/IEC 27701 취득

· 24시간 관제 시스템과 이상금융거래탐지시스템으로 각종 위험을 예방


● 토스는 누가 운영하나요?

토스는 핀테크 기업 '비바리퍼블리카'에서 운영합니다.

비바리퍼블리카는 2019년 KPMG와 H2벤처스가 선정한 전 세계 100대 핀테크 기업 중 29위에 선정되었으며, 국내 핀테크 기업 중 가장 많은 은행 및 증권사와 공식 제휴를 맺고 있습니다. 또한 전자금융거래법 제28조에 따라, 보안과 관제 시스템에 대한 금융감독원의 실사 및 금융위원회의 승인을 통해 전자금융업으로 등록, 안전하게 서비스를 제공하고 있습니다.


● 꼭 필요한 권한만 요청합니다

[선택 접근 권한]

· 연락처 : 연락처를 통한 송금과 프로필 사진 등록

· 알림 : ARS 인증번호를 받거나, 토스에서 전달하는 푸시 메세지 수신

· 카메라 : QR코드 / 실물카드 / 신분증 인식, 이미지 업로드, 프로필 등록에 필요

· 사진 : 이미지 저장/업로드 시 필요

· 위치 : 현 위치 확인 및 표시, 부정거래 방지에 필요

· 동작 및 피트니스 : 만보기 서비스에서 걸음 수 측정

· Face ID : 토스 비밀번호 입력을 대체해 인증 진행 시 필요

· 블루투스 : 근처에 있는 기기 식별 및 연결을 위해 필요

* 선택 권한은 허용하지 않아도 서비스를 이용할 수 있으나, 일부 기능 사용에 제한이 있을 수 있습니다.


● 토스 고객센터는 365일 24시간 열려있습니다.

· 전화 1599-4905

· 카카오톡 @toss

· 이메일 support@toss.im


(주)비바리퍼블리카

서울시 강남구 테헤란로 142 아크플레이스 12층
"""
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  • 다른 곳에 해당 내용을 갖도록 하고, 호출하여 사용하는게 더 좋을 것 같아요!

Comment on lines +244 to +250
addSubviews(
ratingAndReviewLabel, seeAllReviewsButton, ratingScoreLabel, reviewStarImage, maxRatingLabel,
reviewCountsLabel, separateLine6, tapToRateLabel, rateStarStackView, reviewBackgroundGrayView,
reviewTitleLabel, reviewDateLabel, reviewStarScoreLabel, userNameLabel, reviewContentLabel,
readMoreReviewContentButton, developerResponseTextLabel, developerResponseDateLabel,
developerResponseContentLabel, readMoredeveloperResponseButton, reviewWriteButton, appSupportButton
)
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

legend

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants